<template>
<view class="pros">
	<view
		@tap="$emit('input', false)"
		:class="['dialog-backdrop', { 'backdrop-in': value }]"></view>
	<view :class="['contain', { 'modal-in': value }]">
		<view class="close" @tap="$emit('input', false)"><image src="/static/close.png"></image></view>
		<view class="cover">
			<view
				class="defaultCover"
				:style="{ backgroundImage: 'url(' + ProductBody.default_imgurl + ')' }"
			></view>
			<view class="info">
				<view class="price">
					<block v-if="selectAttr.length">
						<text>&yen;</text>
						{{ ProductBody.now_price }}
					</block>
					<block v-else>
						<text>&yen;</text>
						{{ selectAttrItem.now_price }}
					</block>
				</view>
				<view class="item">
					<text class="name text-black">库存：</text>
					<block v-if="selectAttr.length">
						<text class="text-black">{{ ProductBody.storenum }}</text>
					</block>
					<block v-else>
						<text class="text-black">{{ selectAttrItem.storenum }}</text>
					</block>
				</view>
				<view class="item please">
					<block v-if="selectAttr.length">
						<text class="name">请选择：</text>
						<text class="text-black" v-for="item in selectAttr" :key="item.id">
							{{ item.name }}
						</text>
					</block>
					<block v-else>
						<text class="name">已选择：</text>
						<text class="text-black">{{ selectedAttrName }}</text>
					</block>
				</view>
			</view>
		</view>
		<view class="group">
			<scroll-view scroll-y class="srx">
				<view v-for="(item, idx) in attr" :key="idx" class="item">
					<view class="name">{{ item.name }}</view>
					<view class="attr">
						<view
							v-for="(k, x) in item.parent_pros"
							:key="k.id"
							:class="{ act: k.checked }"
							@tap="$emit('select' ,[idx, x])"
						>
							{{ k.name }}
						</view>
					</view>
				</view>
				<view class="item count">
					<view class="name">数量</view>
					<view class="attr">
						<uni-number-box
							:min="1"
							:max="100"
							:value="1"
							@change="buyNum"
						></uni-number-box>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="shop_com">
			<wx-auth :type="1" v-if="!userInfo" :link="{ link: true }"></wx-auth>
			<view class="addCart" @tap="addCart">
				确定
			</view>	
		</view>		
	</view>
</view>	
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box';
	import { mapGetters } from 'vuex'
	export default {
		props: {
			ProductBody: Object,
			attr: Array,
			attrPrice: Array,
			value: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				selectNum: 1
			}
		},
		methods: {
			buyNum(value) {
				// 购买商品的数量
				this.selectNum = value
			},
			addCart () {
				if (this.selectAttr.length) {
					let attrName = ` ${this.selectAttr
						.map(item => item.name)
						.toString()
						.replace(/,/gi, ' ')}`;
					uni.showToast({
						icon: 'none',
						title: `请选择${attrName}`,
						})
				} else {
					if (this.selectAttrItem.storenum) {
						let item = Object.assign({}, this.ProductBody)
						item.prope = this.selectAttrItem.prope.replace(/_/gi, ' '), // 产品属性名称
						item.property_id = this.selectAttrItem.id, // 产品属性Id
						this.$emit('add', item)
						
					} else {
						uni.showToast({
							icon: 'none',
							title: '库存不足>_<'
						})						
					}
				}
			}
		},
		components: { uniNumberBox },
		computed: {
			...mapGetters(['userInfo']),
			selectAttr() {
				// 需要选择的属性
				return this.attr.filter(item => {
					return !item.parent_pros.some(k => k.checked);
				});
			},
			selectedAttrId() {
				// 已选择属性的ID
				let ID = this.selectedAttr
					.map(item => item.id)
					.toString()
					.replace(/,/gi, '_');
				return ID;
			},			
			selectedAttr() {
				// 已经选择的属性
				let result = this.attr.map(item => {
					let rst = item.parent_pros.filter(item => {
						return item.checked;
					});
					return rst[0] || {};
				});
				return result.filter(item => JSON.stringify(item) !== '{}');
			},			
			selectedAttrName() {
				// 已选择属性的名称
				let name = this.selectedAttr
					.map(item => item.name)
					.toString()
					.replace(/,/gi, ' ');
				return name + ' ' + this.selectNum + '件';
			},			
		    selectAttrItem() {
			// 已选择完整商品的对应信息
				if (!this.attr.length) {
					return {
						id: '',
						need_score: this.ProductBody.need_score,
						now_price: this.ProductBody.now_price,
						orgin_price: this.ProductBody.orgin_price,
						prope: '',
						storenum: this.ProductBody.storenum
					}
				}
				return this.attrPrice.filter(item => item.id === this.selectedAttrId)[0] || {};
		   }			
		}
	}
</script>

<style lang="less">
	@import '../../common/styles/variables.less';
	.pros {
		overflow: hidden;
		.price {
			color: @red;
			font-weight: bold;
			font-size: 36upx;
			display: flex;
			align-items: center;
			text {
				font-size: @minSize;
				font-weight: bold;
				padding-right: 5px;
			}
		}		
		.dialog-backdrop {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: calc(100%);
			background: rgba(0, 0, 0, 0.4);
			z-index: 666;
			visibility: hidden;
			opacity: 0;
			transition-duration: 0.4s;
			will-change: opacity;
			contain: strict;
			&.backdrop-in {
				visibility: visible;
				opacity: 1;
			}
		}
		.contain {
			background-color: white;
			z-index: 777;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			top: 20%;
			display: flex;
			flex-direction: column;
			flex-flow: column;
			justify-content: space-between;
			transform: translate3d(0, 100%, 0);
			contain: layout;
			will-change: transform, opacity;
			opacity: 0;
			transition: transform 0.2s, opacity 0.2s;
			border-radius: 12px 12px 0 0;
			&.modal-in {
				opacity: 1;
				transform: translate3d(0, 0, 0);
			}
			.close {
				z-index: 666;
				background-color: white;
				contain: layout;
				border-radius: 50%;
				position: absolute;
				top: 10upx;
				padding: 10upx;
				right: 20upx;
				overflow: hidden;
				& > image {
					width: 30upx;
					height: 30upx;
					display: block;
				}
			}
			.cover {
				padding: 15px;
				display: flex;
				.defaultCover {
					margin-right: 20upx;
					.combackground(contain, center, center);
					width: 200upx;
					height: 200upx;
				}
				.info {
					flex: 1;
					font-size: 24upx;
					.item {
						font-size: 24upx;
						&.please {
							text {
								margin-right: 5px;
								&:last-of-type {
									margin-right: 0;
								}
							}
						}
						.name {
							color: #666;
						}
					}
				}
			}
			.group {
				flex: 1;
				overflow: hidden;
				.srx {
					height: 100%;
					.item {
						&.count {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 3px 0;
							.name {
								margin: 0 0 0 15px;
							}
							.attr {
								margin-right: 15px;
								& > view {
									margin: 0;
									padding: 0;
									background: none;
									border-radius: 0;
								}
							}
						}
						.name {
							font-size: 22upx;
							color: #666;
							margin: 0 15px;
							margin-bottom: 10px;
						}
						.attr {
							font-size: 28upx;
							color: #333;
							display: flex;
							flex-wrap: wrap;
							& > view {
								background: #f7f7f7;
								padding: 10upx 18upx;
								margin: 0 0 10px 15px;
								border-radius: 4px;
								font-size: @minSize;
								&.act {
									background: @red;
									color: white;
								}
							}
						}
					}
				}
			}
			.shop_com {
				height: 92upx;
				display: flex;
				position: relative;
				& > view {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					font-size: 26upx;
					color: white;
					&.addCart {
						background-color: @red;
						color: white;
					}
				}
			}
		}
	}	
</style>
